<script setup>

import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {diffTagText, diffTagType, DiffType, PoolAddDTO} from "@/model/pool.js";
import {r_p_save} from "@/request/api/pool.js";
import {ElMessage} from "element-plus";

const router = useRouter();

const poolAddForm = ref({...PoolAddDTO});

const save = () => {
  /*  // 原本为string[][]，但是<input>是字符类型，此处转换了
  poolAddForm.value.allType = JSON.parse(poolAddForm.value.allType.toString());
  poolAddForm.value.cases = JSON.parse(poolAddForm.value.cases.toString());
  poolAddForm.value.results = JSON.parse(poolAddForm.value.results.toString());
   */
  poolAddForm.value.allType = JSON.parse(poolAddForm.value.allType.toString());
  poolAddForm.value.cases = JSON.parse(poolAddForm.value.cases.toString());
  poolAddForm.value.results = JSON.parse(poolAddForm.value.results.toString());
  r_p_save(poolAddForm.value).then(ok => {
    if (!ok) return;
    ElMessage.success('录 入 成 功');
    poolAddForm.value = {...PoolAddDTO};
    poolAddForm.value.difficulty = DiffType[0];
  });
}

onMounted(() => {
  poolAddForm.value.difficulty = DiffType[0];
})

</script>

<template>
  <div class="index-all">
    <el-form :model="poolAddForm" label-width="70px">
      <el-form-item label="标 题">
        <el-input class="small" v-model="poolAddForm.title" maxlength="20" show-word-limit
                  placeholder="示 例：两数之和"/>
      </el-form-item>
      <el-form-item label="难 度">
        <el-radio-group class="small" v-model="poolAddForm.difficulty">
          <el-radio v-for="(type, index) in DiffType" :key="index" :value="type">
            <el-tag :type="diffTagType(type)">{{ diffTagText(type) }}</el-tag>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="描 述">
        <el-input type="textarea" class="big" v-model="poolAddForm.description" :rows="5"
                  resize="none" placeholder="提 示：<strong>突出文本</strong>，<br>换行"/>
      </el-form-item>
      <el-form-item label="数据类型">
        <el-input class="big" v-model="poolAddForm.allType" placeholder="[''(Java)int, String, List, obj[] ...'']，使用双引号标注，前部分为输入类型，最后为返回类型 "/>
      </el-form-item>
      <el-form-item label="输入集">
        <el-input type="textarea" class="big" v-model="poolAddForm.cases" :rows="5"
                  resize="none" placeholder="提 示：数据集为数组 [[], [] ...] 格式"/>
      </el-form-item>
      <el-form-item label="输出集">
        <el-input type="textarea" class="big" v-model="poolAddForm.results" :rows="5"
                  resize="none" placeholder="提 示：数据集为数组 [[], [] ...] 格式"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="router.back()">取 消</el-button>
        <el-button type="success" @click="save">录 入</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped>
.small {
  width: 400px;
}

.big {
  width: 800px;
}

.el-button {
  width: 100px;
}
</style>